<template>
  <div>
    <h1>watch 函数</h1>
    <ul>
      <li>{{ count }}</li>
      <li>{{ isShow }}</li>
      <li>
        <button @click="change">修改变量</button>
      </li>
      <li>{{ obj }}</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script setup>
/**
 * watch 函数
 * 步骤：
 * 1. 导入 watch 函数
 * 2. 调用 watch 函数定义监听属性
 * 语法：watch(变量 | [变量1, 变量2...], (newVal, oldVal) => { console.log('监听的变量值发生了变化', newVal, oldVal) }, { deep: true, immediate: true })
 * 特点：
 * 1. 可以监听一个或多个变量的变化
 * 2. 可以通过第三个参数 deep 开启深度监听
 * 3. 可以通过第三个参数 immediate 开启立即监听
 */
import { watch, ref } from 'vue'
// 1. 监听简单类型的变量
const count = ref(10)
const isShow = ref(true)
// 2. 监听复杂类型的变量
const obj = ref({
  name: '王老吴',
  age: 18
})
const change = () => {
  // 修改简单类型
  // count.value++
  // isShow.value = !isShow.value
  // 修改复杂类型
  obj.value.age++
}
// 监听一个
// watch(count, (newVal, oldVal) => {
//   console.log('count 变量值发生了变化', newVal, oldVal)
// })
// 监听多个
watch(
  [isShow, count, obj],
  (newVal, oldVal) => {
    console.log('count｜isShow | obj 变量值发生了变化', newVal, oldVal)
  },
  {
    deep: true
  }
)
// watch(
//   obj,
//   (newVal, oldVal) => {
//     console.log('obj 变量值发生了变化', newVal, oldVal)
//   },
//   {
//     deep: true, // 深度监听
//     immediate: true // 立即监听=>页面加载时就会执行监听函数
//   }
// )
</script>

<style lang="scss" scoped></style>
